<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<head>
<link rel="stylesheet" href="resources/css/jquery-ui.css" />
<script src="resources/js/jquery-1.9.1.js"></script>
<script src="resources/js/jquery-ui.js"></script>
<style>
body {
	min-width: 520px;
}

.column {
	width: 170px;
	float: left;
	padding-bottom: 100px;
	margin: 2px;
}

.column-header {
	text-align: center;
	width: 170px;
	float: left;
	background-color: #AAF53D;
	margin: 2px;
}

.portlet {
	margin: 3px 2px 5px 2px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
}

.portlet-header {
	background-color: #FBFE00;
	padding-bottom: 4px;
	border: none;
	font-weight: normal;
}

.portlet-header .ui-icon {
	float: right;
}

.portlet-content {
	padding: 0.4em;
}

.ui-sortable-placeholder {
	border: 1px dotted black;
	visibility: visible !important;
	height: 50px !important;
}

.ui-sortable-placeholder * {
	visibility: hidden;
}
</style>
<script>
	$(function() {		

		window.kanbanCode = "${kanbanCode}";
		loadAllTask();
		$(".column").sortable({
			connectWith : ".column",
			receive : function(event, ui) {
				var taskId=$(ui.item).children('.id').html();
				var statusId=$(ui.item).parent().attr('id');
				$.ajax({
					url : "updateTask?taskId="+taskId+"&statusId="+statusId,
					type : "get",
					data : JSON.stringify({
						taskId : taskId,
						status : statusId
					}),
					contentType : "application/json; charset=utf-8"
				});
			}
		});

		$(".portlet").addClass(				
				"ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
				.find(".portlet-header").addClass(
						"ui-widget-header ui-corner-all").prepend(
						"<span class='ui-icon ui-icon-minusthick'></span>")
				.end().find(".portlet-content");

		$(".portlet-header .ui-icon").click(
				function() {					
					$(this).toggleClass("ui-icon-minusthick").toggleClass(
							"ui-icon-plusthick");
					$(this).parents(".portlet:first").find(".portlet-content")
							.toggle();
				});

		$(".column").disableSelection();

		$("#btnNewTask")
				.on(
						'click',
						function(e) {
							e.preventDefault();
							var subject = $("input[name='subject']").val();
							var description = $("input[name='description']")
									.val();
							$.ajax({
										url : "newTask?code="+ window.kanbanCode,
										type : "post",
										data : JSON.stringify({
											subject : subject,
											description : description
										}),
										contentType : "application/json; charset=utf-8",
										success : function(data) {
											loadAllTask();
										},
										error : function(xhRequest, ErrorText,
												thrownError) {
											alert("Failed to process promotion correctly, please try again");
										}
									});
						})
	});

	function getURLParameter(name) {
		return decodeURI((RegExp(name + '=' + '(.+?)(&|$)').exec(
				location.search) || [ , null ])[1]);
	}

	function loadAllTask() {
		$(".column").html("");
		$(".column").each(function() {
			loadAjaxColumn($(this).attr("id"));
		})
	}

	function loadAjaxColumn(statusId) {
		request = $.ajax({
			url : "taskByStatus",
			type : "post",
			data : {
				statusId : statusId
			}
		});

		request.done(function(response, textStatus, jqXHR) {
			for (i = 0; i < response.length; i++) {
				var task = response[i];
				var template = $('#taskTemplate').html();
				template = template.replace('ID_PLACEHOLDER', task.taskId);
				template = template.replace('TITLE_PLACEHOLDER', task.subject);
				template = template.replace('DESCRIPTION_PLACEHOLDER',
						task.description);
				$('#' + statusId).append(template);
			}
		});

		request.fail(function(jqXHR, textStatus, errorThrown) {
			//console.error("The following error occured: " + textStatus,
				//	errorThrown);
		});
	}
</script>
</head>
<body>Share This Link with your friend : <input maxlength="100" size="100" type="text" readonly="readonly" value="http://localhost:8080/ProjectKanban/kanban?code=${kanbanCode}" />


	<form class="form-horizontal">
		<fieldset>
			<legend>New task</legend>
			<div class="form-group">
				<label for="inputEmail" class="col-lg-2 control-label">Subject:
				</label>
				<div class="col-lg-6">
					<input type="text" class="form-control" name="subject"
						placeholder="Subject">
				</div>
			</div>
			<div class="form-group">
				<label for="inputEmail" class="col-lg-2 control-label">Description:
				</label>
				<div class="col-lg-6">
					<input type="text" class="form-control" name="description"
						id="inputEmail" placeholder="Description">
				</div>
			</div>
			<div class="form-group">
				<div class="col-lg-10 col-lg-offset-2">
					<button type="submit" class="btn btn-primary" id="btnNewTask">Submit</button>
				</div>
			</div>
		</fieldset>
	</form>
	<c:forEach items="${status}" var="statusItem">
		<div class="column-header" style="background-color: ${statusItem.color}">${statusItem.name}</div>
	</c:forEach>
	<div class="clearfix"></div>
	<c:forEach items="${status}" var="statusItem">
		<div class="column statusColumn" id="${statusItem.statusId}"></div>
	</c:forEach>

	<div id="taskTemplate" style="display: none;">
		<div class="portlet">
			<div class="id" style="visibility: hidden;position: absolute;">ID_PLACEHOLDER</div>
			<div class="title portlet-header">TITLE_PLACEHOLDER</div>
			<div class="description portlet-content">DESCRIPTION_PLACEHOLDER</div>
		</div>
	</div>

	<c:forEach items="${status}" var="statusItem">
		<input type="hidden" name="statusList" value="${statusItem.statusId}">
	</c:forEach>


</body>
